<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="keywords" content="" />
        <title>礼品选赠</title>

        <!-- ========== Css Files ========== -->
        <link href="../static/css/root.css" rel="stylesheet">

        <style>
            h1 {
                display: inline-block;
                font-size:large;
                font-weight: bold;
                color: white;
            }
        </style>

    </head>

    <body>
        
        <!-- Start an Alert -->
        <div id="alerttop" class="Modern-alert Modern-alert-icon Modern-alert-click alert6 Modern-alert-top" style="display: none;" onclick="change()">
            <i class="fa fa-user"></i>
            请在另一页面填写地址 <a href="#">（点击取消提示）</a>
        </div>
        <!-- End an Alert -->

        <!-- START TOP -->
        <div id="top" class="clearfix" style="text-align: center;">

            <!-- page title -->
            <h1>欢迎来到软微二十周年院庆选礼品系统</h1>

        </div>
        <!-- END TOP -->

        <!-- START CONTENT -->

        <div class="content" style="margin-left: 0px;">
            <div class="container-padding container-widget">

                <div class="row">
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-title">礼品1</div>

                            <div class="panel-body">
                                <div>
                                    <img src="../static/img/xiong.jfif" alt="小熊" width="100%">
                                </div>

                                <div>
                                    <div class="col-xs-12">
                                        礼品相关介绍：<span>
                                            熊（英文名称：Bear）：是食肉目熊科动物的通称，熊平时还算温和，但是受到威胁或遇到危险时，容易暴怒，打斗起来非常凶猛。
                                        </span>
                                    </div>
                                </div>

                                <div>
                                    <div class="col-xs-6">
                                        剩余容量: <span id="remain_1"> 10 </span>
                                    </div>
                                    
                                    <div class="col-xs-6">
                                        <div class="radio radio-info radio-inline">
                                            <input type="radio" name="radioInline" id="inlineRadio1" value="opt_1" checked >
                                            <label for="inlineRadio1">礼品1</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-title">礼品2</div>

                            <div class="panel-body">
                                <div>
                                    <img src="../static/img/rose.jfif" alt="玫瑰" width="100%">
                                </div>

                                <div>
                                    <div class="col-xs-12">
                                        礼品相关介绍：<span>
                                            玫瑰（学名：Rosa ssp. 英文名称：Rosa）：是蔷薇目，蔷薇科、蔷薇属多种植物和培育花卉的通称名字。直立、蔓延或攀援灌木，多数被有皮刺、针刺或刺毛。
                                        </span>
                                    </div>
                                </div>

                                <div>
                                    <div class="col-xs-6">
                                        剩余容量: <span id="remain_2"> 20 </span>
                                    </div>
                                    
                                    <div class="col-xs-6">
                                        <div class="radio radio-info radio-inline">
                                            <input type="radio" name="radioInline" id="inlineRadio2" value="opt_2">
                                            <label for="inlineRadio2">礼品2</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-title">礼品3</div>

                            <div class="panel-body">
                                <div>
                                    <img src="../static/img/cap.jpg" alt="杯子" width="100%">
                                </div>

                                <div>
                                    <div class="col-xs-12">
                                        礼品相关介绍：<span>
                                            杯子是一种专门盛水的器皿。其主要功能都是用来饮酒或饮茶，一般容积不大。或在古代喝茶的杯子被称为盖碗。基本器型大多是直口或敞口，口沿直径与杯高近乎相等。
                                        </span>
                                    </div>
                                </div>

                                <div>
                                    <div class="col-xs-6">
                                        剩余容量: <span id="remain_3"> 30 </span>
                                    </div>
                                    
                                    <div class="col-xs-6">
                                        <div class="radio radio-info radio-inline">
                                            <input type="radio" name="radioInline" id="inlineRadio3" value="opt_3">
                                            <label for="inlineRadio3">礼品3</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-title">礼品4</div>

                            <div class="panel-body">
                                <div>
                                    <img src="../static/img/glass.jfif" alt="眼镜" width="100%">
                                </div>

                                <div>
                                    <div class="col-xs-12">
                                        礼品相关介绍：<span>
                                            眼镜（glasses）是由镜片和镜架组合起来的，用来改善视力、保护眼睛或作装饰用途的用品。眼镜可矫正多种视力问题，包括近视、远视、散光、老花、斜视或者弱视等。
                                        </span>
                                    </div>
                                </div>

                                <div>
                                    <div class="col-xs-6">
                                        剩余容量: <span id="remain_4"> 40 </span>
                                    </div>
                                    
                                    <div class="col-xs-6">
                                        <div class="radio radio-info radio-inline">
                                            <input type="radio" name="radioInline" id="inlineRadio4" value="opt_4">
                                            <label for="inlineRadio4">礼品4</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <button id="subBtn"type="button" class="btn btn-default btn-block" onclick="submitForm()">确定选择</button>
                </div>
            </div>
        </div>

        <!-- END CONTENT -->
    
    <!-- ================================================
    Sweet Alert
    ================================================ -->
    <script src="../static/js/sweet-alert/sweet-alert.min.js"></script>
    
    <script type="text/javascript">

        function change() {
            var topElement = document.getElementById('alerttop');
            topElement.setAttribute('style', 'display: none;');
        }
    
        function getParams(key) {
            var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        };
        
        async function whenComeIn() {
            
            var code = getParams("code");
            console.log(code);
            
            fetch('http://fanggx.xyz:3355/init?code=' + code)
                .then(function(res) {
                    return res.json();
                }).then(function(myJson) {
                    console.log(myJson);
                    var com_id_1 = myJson.com_id_1;
                    var com_id_2 = myJson.com_id_2;
                    var com_id_3 = myJson.com_id_3;
                    var com_id_4 = myJson.com_id_4;
                    var address_status = myJson.address_status;  // 是否填写过地址 
                    var login_status = myJson.login_status;      // 登录状态
                    var suc_status = myJson.suc_status;          // 是否已选过礼物
                    var user_token = myJson.token;
                    localStorage.setItem('token', user_token)
                    
                    document.getElementById("remain_1").innerHTML = com_id_1;
                    document.getElementById("remain_2").innerHTML = com_id_2;
                    document.getElementById("remain_3").innerHTML = com_id_3;
                    document.getElementById("remain_4").innerHTML = com_id_4;
                    
                    if (login_status == -1 || login_status == '-1') {
                        swal("登录错误", "请重新登录该页面进行刷新", "error");
                        var btnElement = document.getElementById('subBtn');
                        btnElement.setAttribute('disabled', true);
                    } else {
                        if (address_status == 0 || address_status == '0') {
                            var topElement = document.getElementById('alerttop');
                            topElement.setAttribute('style', 'display: block;');
                        }
                        if (suc_status == 1 || suc_status == '1') {
                            var btnElement = document.getElementById('subBtn');
                            btnElement.setAttribute('disabled', true);
                        }
                    }
                });
            
        }
        window.onload = whenComeIn;
        
        async function submitForm() {

            var check = document.getElementsByName("radioInline");
            var valueChecked = "";
            var token = localStorage.getItem("token");
            
            // 1、获取选中的哪个礼品
            for(var i = 0; i < check.length; i++) {
                if(check[i].checked == true) {
                    valueChecked = check[i].value;
                    console.log(valueChecked);
                }
            };
            
            // 2、前端做简单的检查
            gift_remained = document.getElementById("remain_" + valueChecked.slice(-1)).innerHTML;
            console.log(parseInt(gift_remained));
            if(parseInt(gift_remained) <= 0) {
                return swal("选择失败！", "当前礼品已被选完，请另择其一", "error");
            }
            
            // 3、将数据传给后台
            fetch('http://fanggx.xyz:3355/submitinfo?obj_id=' + valueChecked + '&user_token=' + token)
                .then(function(res) {
                    return res.json();
                }).then(function(myJson) {
                    console.log(typeof(myJson));
                    swal({
                        title: "查看返回的内容",
                        text: myJson
                    });
                    if (myJson == 1) {
                        swal("选择成功！", "如果您没有填写地址的话，请在另一页面填写地址！", "success");
                        var btnElement = document.getElementById('subBtn');
                        btnElement.setAttribute('disabled', true);
                    } else if (myJson == -1) {
                        swal("选择失败！", "选择失败，请刷新重试", "error");
                        var btnElement = document.getElementById('subBtn');
                        btnElement.setAttribute('disabled', true);
                    } else if (myJson == -2) {
                        swal("选择失败！", "抢礼品时间未到，请稍后重试", "error");
                    } else if (myJson == -3) {
                        swal("选择失败！", "礼品选择出错，请重新选择", "error");
                    } else if (myJson == -4) {
                        swal("选择失败！", "登录状态出错！请重新登陆", "error");
                        var btnElement = document.getElementById('subBtn');
                        btnElement.setAttribute('disabled', true);
                    } else if (myJson == -5) {
                        swal("选择失败！", "当前礼品已被选完，请另择其一", "error");
                    } else if (myJson == -6) {
                        swal("选择失败！", "您已选过礼品！", "error");
                        var btnElement = document.getElementById('subBtn');
                        btnElement.setAttribute('disabled', true);
                    }
                });
        }

    </script>

    </body>
</html>